<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Swipeout 滑动块"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-swipeout :left-auto-show="true">
        <template slot="left-buttons">
          <hips-swipeout-button
            width="80"
            bg-color="blue"
            font-color="#fff"
            @click.native="handleMe"
          >
            我的
          </hips-swipeout-button>
        </template>
        <template slot="right-buttons">
          <hips-swipeout-button
            width="60"
            bg-color="blue"
            font-color="#fff"
            @click.native="handleDelete"
          >
            删除
          </hips-swipeout-button>
          <hips-swipeout-button
            width="60"
            bg-color="yellow"
            font-color="#000"
            @click.native="handleShare"
          >
            分享
          </hips-swipeout-button>
        </template>
        <div
          slot="content"
          style="background-color:white;height: 50px;line-height: 50px;padding: 0 10px;"
        >
          title-0
        </div>
      </hips-swipeout>
    </demo-block>
    <demo-block title="手动切换展示按钮">
      <hips-swipeout
        ref="singleSwipeout"
        :click-out-side-close="false"
      >
        <template slot="left-buttons">
          <hips-swipeout-button
            width="80"
            bg-color="blue"
            font-color="#fff"
            @click.native="handleMe"
          >
            我的
          </hips-swipeout-button>
        </template>
        <template slot="right-buttons">
          <hips-swipeout-button
            width="60"
            bg-color="blue"
            font-color="#fff"
            @click.native="handleDelete"
          >
            删除
          </hips-swipeout-button>
          <hips-swipeout-button
            width="60"
            bg-color="yellow"
            font-color="#000"
            @click.native="handleShare"
          >
            分享
          </hips-swipeout-button>
        </template>
        <hips-cell
          slot="content"
          title="title_1"
          value="value_1"
          @click="clickSingleContent('title_1')"
        />
      </hips-swipeout>
      <hips-button @click="openLeft">
        开启/关闭左侧按钮
      </hips-button>
      <hips-button @click="openRight">
        开启/关闭右侧按钮
      </hips-button>
    </demo-block>
    <demo-block title="使用列表并模拟删除事件">
      <hips-swipeout
        v-for="(item, index) in list"
        :key="index"
        :left-auto-show="true"
      >
        <template slot="right-buttons">
          <hips-swipeout-button
            width="60"
            bg-color="blue"
            font-color="#fff"
            @click="handleDelete1(index)"
          >
            删除
          </hips-swipeout-button>
        </template>
        <hips-cell
          slot="content"
          :title="item.title"
          :value="item.value"
          is-link
          @click="clickSingleContent('title_0')"
        />
      </hips-swipeout>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Swipeout, SwipeoutButton, Button, Cell } from '@hips/vue-ui';
export default {
  components: {
    [Swipeout.name]: Swipeout,
    [SwipeoutButton.name]: SwipeoutButton,
    [Button.name]: Button,
    [Cell.name]: Cell,
  },
  mixins: [ BasicView ],
  data() {
    return {
      list: [
        { label: 'label-1', value: 'value-1' },
        { label: 'label-2', value: 'value-2' },
        { label: 'label-3', value: 'value-3' },
      ],
    };
  },
  methods: {
    handleMe() {
      this.$hips.toast('handleMe');
    },
    handleDelete() {
      this.$hips.toast('handleDelete');
    },
    handleDelete1(index) {
      this.$hips.toast('handleDelete');
      this.list.splice(index, 1);
    },
    handleShare() {
      this.$hips.toast('handleShare');
      let swipeout = this.$refs.singleSwipeout;
      swipeout.closeSide('right');
    },
    openLeft() {
      let swipeout = this.$refs.singleSwipeout;
      swipeout.toggleOpenClose('left');
    },
    openRight() {
      let swipeout = this.$refs.singleSwipeout;
      swipeout.toggleOpenClose('right');
    },
    clickSingleContent(title) {
      this.$hips.toast(`click the content of ${title}`);
    },
  },
};
</script>

<style>
.list {
  user-select: none;
}
</style>
